<template>
  <page-header-wrapper>
    <a-card>
      <a-form-model ref="hostoryRate" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="10">
            <a-form-model-item label="日期：">
              <a-date-picker v-model="startDate" class="width" /> 至
              <a-date-picker v-model="endDate" class="width" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="货币对：" prop="currency">
              <a-select v-model="currency" class="width">
                <a-select-option value="全部">
                  全部
                </a-select-option>
                <a-select-option value="NZD">
                  USD/NZD
                </a-select-option>
                <a-select-option value="CAD">
                  USD/CAD
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-button type="primary" @click="search">查询</a-button>
        </a-row>
      </a-form-model>
      <a-table rowKey="id" :columns="columns" :data-source="data" :pagination="pagination">
        <span slot="date" slot-scope="date"> {{ humanizeDate(date) }}</span>
        <span slot="currency" slot-scope="currency"> USD/{{ currency }}</span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getHistoryRate } from '@/api/common'
import moment from 'moment'
export default {
  name: 'historyRate',
  data() {
    return {
      labelCol: { span: 3 },
      wrapperCol: { span: 14 },
      startDate: '',
      endDate: '',
      currency: '全部',
      columns: [
        {
          title: '货币对',
          dataIndex: 'currency',
          key: 'currency',
          scopedSlots: { customRender: 'currency' }
        },
        {
          title: '时间',
          dataIndex: 'date',
          key: 'date',
          scopedSlots: { customRender: 'date' }
        },
        {
          title: '汇率',
          dataIndex: 'exrate',
          key: 'exrate'
        }
      ],
      data: [],
      pagination: {
        total: 1,
        pageSize: 10,
        onChange: this.getData
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    search() {
      this.getData()
    },
    async getData(page = 1) {
      const _form = {
        page,
        limit: this.pagination.pageSize
      }
      if (this.currency != '全部') {
        _form.currency = this.currency
      }
      if (this.startDate) {
        _form.startDate = moment(this.startDate)
          .startOf('day')
          .format('X')
      }
      if (this.endDate) {
        _form.endDate = moment(this.endDate)
          .startOf('day')
          .format('X')
      }
      const res = await getHistoryRate(_form)
      const data = res.result.data
      this.pagination.total = data.total
      this.data = data.list.map((el, i) => {
        el.index = i
        return el
      })
    },
    humanizeDate(v) {
      return moment(v, 'X').format('YYYY-MM-DD') || '--'
    }
  }
}
</script>
<style lang="css" scoped>
.width {
  width: 120px;
}
</style>
